<template>
  <div style="margin-top:-20px;">
    <a-card :bordered="false">
      <!-- <a-button type="primary" style="margin: 10px 0 0 20px" >文件导入</a-button> -->
      <div style="display:flex;flex-direction:row">
        <a-button style="margin: 20px 0 0 20px" type="primary" @click="addEvent">
          添加数据
        </a-button>
        <a href="http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/excel/在线平安.xlsx">
          <a-button style="margin: 20px 0 0 20px" type="primary">
            模板下载
          </a-button>
        </a>
        <div style="display:flex;flex-direction:column;">
          <a-upload name="file" :multiple="true" :action='uploadFile.url' :headers="headers" :beforeUpload="beforeUpload()" @change="handleChangeupload">
            <a-button style="margin: 20px 0 0 20px" type="primary">
              批量导入
            </a-button>
          </a-upload>
          <a-alert v-show="errorMessageShow" style="margin: 10px 0 0 20px" type="error" :message="errorMessage" banner />
        </div>
      </div>
      <!-- 表格 -->
      <a-table @change="pageShow" :loading="tableLoading" style="margin: 10px 20px 20px 20px" :columns="columnstable" :data-source="data" bordered size="middle" :pagination="pagination">
        <template slot="action" slot-scope="text, record">
          <a @click="modifyEvent(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="quxiaoEvent(record.id)">删除</a>
        </template>
      </a-table>
      <!-- -------//进度条----- -->
      <OSSVUE v-if="visiblejindu" v-bind:file="fileData" @uploadSuccessEvent="uploadSuccessEvent"></OSSVUE>
      <!-- 添加数据 -->
      <AddStandardVideo v-if="addShow" @cancelEvent="cancelEvent" @successEvent="successEvent"></AddStandardVideo>
      <!--/ //修改数据 -->
      <ModifyStandard v-if="modifyShow" @cancelEvent="cancelEvent" v-bind:info="info" @successEvent="successEvent"></ModifyStandard>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { ACCESS_TOKEN, ROLE_NAME } from '@/store/mutation-types'
import Vue from 'vue'
import { getLineMonitorList, modifyVideoStatus, setStandardVideoAnnex, deleteLineMonitor } from '@/api/video'
import { getBase64, UploadToOss } from '@/utils/oss'
import ModifyStandard from '@/views/videoManage/maintenanceResources/resourceEntry/modifyOnlineSafety'
import AddStandardVideo from '@/views/videoManage/maintenanceResources/resourceEntry/addOnlineSafety'
import OSSVUE from '@/views/videoManage/oss'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
const data = []
export default {
  components: { ModifyStandard, AddStandardVideo, OSSVUE },
  data() {
    return {
      errorMessageShow: false,
      errorMessage: '',
      fileName: '',
      fileData: '',
      visiblejindu: false,
      addShow: false,
      modifyShow: false,
      columnstable,
      data,
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      selectedRowKeys: [],
      selectedRows: [],
      uploadFile: {
        id: 1, //非必填 添加项
        name: '',
        url: '/api/import/manage/line_monitor',
        file: '',
        status: '未上传',
        desc: '',
      },
      headers: {
        authorization: Vue.ls.get('ACCESS_TOKEN'),
      },
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 10,
      startTime: '',
      endTime: '',
      tableLoading: false,
      id: '',
      examineType: 1,
      linshiId: 0,
      info: {},
    }
  },
  filters: {},
  created() {},
  computed: {},
  mounted() {
    this.startTime = getNowFormatDate() + ' 00:00:00'
    this.endTime = getNowFormatDate() + ' 23:59:59'
    columnstable[3].title = getNowFormatDate()
    this.getDataInfoFunction()
  },
  methods: {
    //自定义上传前
    beforeUpload(record) {
      this.headers.authorization = Vue.ls.get('ACCESS_TOKEN')
    },
    //数据导入
    handleChangeupload(info) {
      let fileList = [...info.fileList]
      // this.$message.success('文件正在上传请稍等!')
      if (info.file.status === 'uploading') {
      }
      if (info.file.status === 'done') {
        if (info.file.response.code == 200) {
          this.$message.success(`${info.file.name}文件,上传成功`)
          this.getDataInfoFunction()
        } else {
          this.errorMessage = `${info.file.name}文件,上传失败:${info.file.response.msg}`
          this.$message.error(`${info.file.name}文件,上传失败:${info.file.response.msg}`)
          this.errorMessageShow = true
        }
      } else if (info.file.status === 'error') {
        this.errorMessage = `${info.file.name}文件,上传失败.`
        this.$message.error(`${info.file.name}文件,上传失败.`)
        this.errorMessageShow = true
      } else if (info.file.status === 'removed') {
        this.errorMessage = ''
        this.errorMessageShow = false
      }
    },
    handleChange() {},
    //成功
    successEvent() {
      this.getDataInfoFunction()
      this.modifyShow = false
      this.addShow = false
    },
    //新增
    addEvent() {
      this.addShow = true
    },

    cancelEvent() {
      this.modifyShow = false
      this.addShow = false
    },

    //获取表格数据
    getDataInfoFunction() {
      this.tableLoading = true
      getLineMonitorList(this.current, this.pageSize, '', this.startTime, this.endTime)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records.map(function (currentValue, index, arr) {
            currentValue.key = index + 1
            return currentValue
          })
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      getLineMonitorList(pagination.current, pagination.pageSize, '', this.startTime, this.endTime)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records.map(function (currentValue, index, arr) {
            currentValue.key = index + 1
            return currentValue
          })
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //删除
    quxiaoEvent(id) {
      this.$confirm({
        title: '提示',
        content: '确定要删除吗?',
        onOk: () => {
          deleteLineMonitor(id).then((response) => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '删除成功!',
                  duration: 3,
                })
                this.getDataInfoFunction()
              }
            }
          })
        },
        onCancel() {},
      })
    },
    //编辑
    modifyEvent(e) {
      this.info = e
      this.modifyShow = true
    },

    onChange(e) {},
  },
}
const columnstable = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 10,
    align: 'center',
  },
  {
    title: '区县',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: '维护量',
    dataIndex: 'monitorNum',
    width: 100,
    align: 'center',
  },
  {
    title: 'xx年xx月xx日-xx年xx月xx日',
    align: 'center',
    children: [
      {
        title: '在线率(每天10点)',
        align: 'center',
        children: [
          {
            title: '在线量',
            align: 'center',
            dataIndex: 'onlineNum',
            width: 100,
          },
          {
            title: '在线率(在线量/公网量)',
            dataIndex: 'onlineRate',
            width: 100,
            align: 'center',
          },
        ],
      },
      {
        title: '故障率',
        align: 'center',
        children: [
          {
            title: '发生离线量',
            dataIndex: 'offlineNum',
            width: 100,
            align: 'center',
          },
          {
            title: '故障率（累计发生探头量/探头总量）',
            dataIndex: 'repairRate',
            width: 100,
            align: 'center',
          },
        ],
      },
    ],
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 50,
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
</script>
